<template>
    <div class="taskDetail">
        <pk-task-nav ></pk-task-nav>
        <div>
            <pk-img
            :src="taskInfo.goodsPic"
            width="100%">
            </pk-img>
        </div>
        <div class="goodsInfo">
            <div class="goodsPriceWrap">
                <div>
                    <div class="goodsPriceNumber text-red-pk">￥{{taskInfo.goodsPrice}}</div>
                </div>
                <div>
                    <div class="text-gray-deep-pk">任务赏金：<span class="text-red-pk">￥{{taskInfo.taskReward}}</span></div>
                </div>
            </div>
            <div class="basePriceWrap text-light-pk">
                <div >价格￥{{taskInfo.basePrice}}</div>
            </div>
            <div>
                <div class="goodsNameWrap text-black-pk">{{taskInfo.goodsName}}</div>
            </div>
            <div @click="handleFavorite">
                <div v-if="this.isFavorite==='0'" class="favoriteWrap">
                    <div>
                        <van-icon name="star-o" size="18" color="#B3B3B3"/>
                    </div>
                    <div class="text-light-pk">收藏</div>
                </div>
                <div v-if="this.isFavorite==='1'" class="favoriteWrap">
                    <div>
                        <van-icon name="star" size="18" color="#D82D11" />
                    </div>
                    <div class="text-light-pk">取消</div>
                </div>
            </div>
        </div>
        <div class="taskDetailWrap">
            <div class="taskConditionWrap detailItem">
                <div class="itemTitle">
                    任务目标暂无数据
                </div>
                <div class="itemRow itemDl text-gray-deep-pk">
                    <div class="leftDt">test</div>
                    <div class="rightDd condition text-red-pk">
                        test
                    </div>
                </div>
            </div>
            <div class="taskDescriptionWrap detailItem text-gray-deep-pk">
                <div class="itemTitle">
                    任务细则
                </div>
                <div  class="itemRow itemDl">
                    <div class="leftDt">任务时间:</div>
                    <div class="rightDd">
                        <span>{{taskInfo.beginTime}}</span>至<span>{{taskInfo.endTime}}</span>
                    </div>
                </div>
                <div  class="itemRow itemDl">
                    <div class="leftDt">任务类型:</div>
                    <div class="rightDd">
                        {{joinTypeFmt(taskInfo.joinType)}}
                    </div>
                </div>
                <div  class="itemRow itemDl">
                    <div class="leftDt">任务说明:</div>
                    <div class="rightDd">
                        {{taskInfo.taskContent}}
                    </div>
                </div>
                <div  class="itemRow itemDl">
                    <div class="leftDt">领取上限:</div>
                    <div class="rightDd taskLimit text-red-pk">
                        {{taskInfo.taskLimit}}
                    </div>
                </div>
                <div  class="itemRow itemDl">
                    <div class="leftDt">任务奖金:</div>
                    <div class="rightDd reward text-red-pk">
                        ￥{{taskInfo.taskReward}}
                    </div>
                </div>
                <div  class="itemRow itemDl">
                    <div class="leftDt">任务押金:</div>
                    <div class="rightDd taskCash text-red-pk">
                        ￥{{taskInfo.taskCash}}
                    </div>
                </div>
                <div v-if="taskInfo.isReceive === '0'"
                     @click="joinTask"
                     class="submit-btn-red">
                    领取任务
                </div>
                <div v-else>
                    <div v-if="taskInfo.isPayTaskCash === '0'"
                         @click="payTaskCash"
                         class="submit-btn-red" >
                        去缴纳任务押金
                    </div>
                    <div v-else
                         @click="doTask"
                         class="submit-btn-red">
                        去做任务
                    </div>
                </div>
            </div>
            <div v-if="taskInfo.isPayTaskCash === '1'" class="taskDescriptionWrap detailItem">
                <div class="itemTitle">
                    我的任务情况
                </div>
                <div  class="itemRow itemDl">
                    <div class="leftDt">我的进度:</div>
                    <div class="rightDd text-light-pk">
                       {{userTaskReceiveVo.resultName}}
                        <div class="progress">
                           <span class="text-red-pk">{{userTaskReceiveVo.result}}</span>/<span>{{userTaskReceiveVo.needResult}}</span>
                        </div>
                        <div>
                            <van-progress :show-pivot="false" color="red" :percentage="taskPercent" stroke-width="5"></van-progress>
                        </div>
                        <!--<div class="progress text-light-pk">完成销售（当前<span class="text-red-pk">0</span>，预计<span class="text-red-pk">0</span>）</div>-->                    </div>
                </div>
            </div>
            <div class="taskRankWrap detailItem">
                <div class="itemTitleWrap">
                    <div class="itemTitle rankDt">
                        任务排行
                    </div>
                    <div class="rankResult text-light-pk">
                        总销量
                        <span v-if="taskRankAllVo.result" class="text-red-pk" style="padding-left: 2px">{{taskRankAllVo.result}}</span>
                        <span v-else class="text-red-pk" style="padding-left: 2px">0</span>
                        ({{taskRankAllVo.resultName}}
                        <span v-if="taskRankAllVo.expectedResult" class="text-red-pk" style="padding-left: 2px">{{taskRankAllVo.expectedResult}}</span>
                        <span v-else class="text-red-pk" style="padding-left: 2px">0</span>
                        )
                    </div>
                </div>
                <div v-for="(item,index) in taskRankAllVo.taskRankVoList" :key="index" class="itemRow rankDl">
                    <div class="rankDl flex-grow-1">
                        <div :class="['rankSort',sortBrgFmt(index)]">{{index+1}}</div>
                        <div :class="['rankDt', 'userName', sortColorFmt(index)]">{{item.nickName}}</div>
                    </div>
                    <div class="rankDd text-red-pk rankNum">{{item.result}}</div>
                    <div class="rankDd text-red-pk">{{item.expectedResult}}</div>
                </div>
            </div>
        </div>

        <div class="groupTask">
            <van-popup v-model="groupTask" closeable :style="{height:'200px',width:'80%'}">
                <div class="title bg-F5-gray">选择</div>
                <div class="text-center-pk">
                    <div class=" message">
                        以“个人”或者“团队”形式领取该任务
                    </div>
                    <div class="joinWrap ">
                        <div class="joinWay">个人</div>
                        <div class="joinWay">团队</div>
                    </div>
                </div>
            </van-popup>
        </div>

    </div>
</template>

<script>
    import pkTaskNav from './PkTaskNav'
    export default {
        name: 'taskDetail',
        components: {
            pkTaskNav
        },

        data() {
            return {
                taskId: this.$route.query.taskId,
                taskInfo:{},
                taskRankAllVo:{},
                groupTask:false,
                isFavorite:"0",
                userTaskReceiveVo:{},//我的进度
                taskPercent:0,
            }
        },
        created() {
            this.getTaskInfo();
        },
        computed: {},
        watch: {},
        methods: {
            getTaskInfo(){
                this.$api.getTaskInfo(this.taskId).then(res=>{
                    let result=this.$resData(res)
                    if(result) {
                        this.taskInfo = result;
                        this.taskRankAllVo = result.taskRankAllVo;
                        this.isFavorite=result.isFavorite;
                        if(result.userTaskReceiveVo){
                            this.userTaskReceiveVo=result.userTaskReceiveVo;
                            let total=parseInt(result.userTaskReceiveVo.needResult);
                            let current=parseInt(result.userTaskReceiveVo.result);
                            this.taskPercent=(current*100)/total;


                        }

                    }
                })
            },
            // 序号背景颜色
            sortBrgFmt(index) {
                let classStr = "bg-brg-ccc";
                switch (index) {
                    case 0:
                        classStr = "bg-red-pk";
                        break;
                    case 1:
                        classStr = "bg-yellow";
                        break;
                    case 2:
                        classStr = "bg-brg-grey";
                        break;
                    default:
                        classStr = "bg-brg-ccc"
                }
                return classStr
            },
            //字体颜色
            sortColorFmt(index) {
                let classStr = "text-gray-ccc";
                switch (index) {
                    case 0:
                        classStr = "text-black-pk";
                        break;
                    case 1:
                        classStr = "text-gray-deep-pk";
                        break;
                    case 2:
                        classStr = "text-light-pk";
                        break;
                    default:
                        classStr = "text-gray-ccc"
                }
                return classStr
            },
            //收藏
            handleFavorite() {
                let isFavorite = (this.isFavorite == "0") ? "1" : "0";
                this.$api.userFavorite({
                    "isFavorite": isFavorite,
                    "type": "2",
                    "userFavoriteId":this.taskId
                }).then(res=>{
                    let result=this.$resResult(res)
                    if(result) {
                        this.isFavorite = (this.isFavorite == "0") ? "1" : "0";
                        let message = (this.isFavorite == "0") ? "取消成功" : "收藏成功";
                        this.$toast({
                            message: message
                        })
                    }
                })

            },
            //领取任务
            joinTask(){
                this.$api.joinTask({
                    joinType: "1",
                    taskId: this.taskId,
                    teamId:""
                }).then(res => {
                    let result = this.$resResult(res);
                    if(result) {
                        this.getTaskInfo();
                        this.$toast({
                            message : "恭喜您成功领取任务"
                        })
                    }
                })
            },
            //缴纳任务押金
            payTaskCash() {
                this.$router.push({
                    path:"/task/taskPayment",query:{taskId:this.taskId}
                })
            },
            //做任务
            /**
             * 传递的参数：goodsId、
             */
            doTask(){
                this.$router.push({
                    path: "/goods/goodsDetail",query:{goodsId:this.taskInfo.goodsId}
                })
            },
            //任务类型joinType：0:表示所有，1，个人，2，团队
            joinTypeFmt(joinType){
                let arr=[
                    {value:'0',name:"所有"},
                    {value:'1',name:"个人"},
                    {value:'1',name:"团队"},
                ];
                return this.$util.dictTranslate(arr,joinType);
            },
        }
    }
</script>

<style lang="scss" scoped>
    .taskDetail {
        font-size: 14px;
        line-height: 1.8 ;
        .navHead{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 100;
            .manage{
                padding-left: 10px;
                font-size: 14px;
            }
        }
        .goodsInfo {
            padding: 10px 14px;
            position: relative;
            background: #FFFFFF;
            line-height: 1.5;
            font-size: 13px;
            .goodsPriceWrap {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding-right: 60px;
                .goodsPriceNumber {
                    font-size: 18px;
                }
            }
            .basePriceWrap {
                text-decoration: line-through;
                font-size: 12px;
            }
            .favoriteWrap {
                position: absolute;
                top: 8px;
                right: 16px;
                text-align: center;
                img{
                    width: 18px;
                    height: 18px;
                }
            }
            .goodsNameWrap {
                font-size: 15px;
                font-weight: bold;
                width: 100%;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
        .taskDetailWrap {
            width: 100vw;
            overflow-x: hidden;
            .detailItem {
                background: #FFFFFF;
                padding: 10px;
                margin: 10px;
                border-radius: 4px;
                .itemTitle {
                    border-left: 2px solid #D82D11;
                    padding-left: 5px;
                    font-size: 15px;
                    font-weight: bold;
                }
                .itemRow {
                    border-bottom: 1px solid #F5F5F5;
                    padding: 14px 9px;
                    font-size: 13px;
                    line-height: 20px;
                }
                .codNumber {
                    float: right;
                    font-weight: bold;
                }
                .itemDl {
                    color: #4D4D4D;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    .leftDt {
                        font-size: 14px;
                        width: 6em;
                    }
                    .rightDd {
                        flex: 1;
                        font-size: 13px;
                        line-height: 20px;
                    }
                    .condition, .taskCash, .reward, .taskLimit{
                        text-align: right;
                        font-weight: bold;
                        font-size: 13px;
                    }
                    .rewardIcon, .taskCashIcon {
                        font-size: 12px;
                    }
                }
                .progress{
                    padding: 5px 0;
                }
            }
            .taskRankWrap {
                padding-bottom: 70px;
                .itemTitleWrap {
                    display: flex;
                    align-items: center;
                    .rankDt {
                        flex: 1;
                    }
                    .rankResult {
                        font-size: 13px;
                    }
                }
                .rankDl {
                    display: flex;
                    align-items: center;
                    .rankSort {
                        font-size: 12px;
                        color: #FFFFFF;
                        width: 20px;
                        height: 20px;
                        line-height: 20px;
                        border-radius: 2px;
                        text-align: center;
                        margin-right: 10px;
                    }
                    .rankDt {
                        flex: 1;
                        font-size: 14px;
                    }
                    .rankDd {
                        text-align: right;
                        font-size: 13px;
                    }
                    .rankNum{
                        padding:0 15px;
                    }
                }
            }
            .submit-btn-red {
                margin: 10px auto 0;
                width: 85%;
                color: #FFFFFF;
                text-align: center;
                font-size: 15px;
                line-height: 40px;
                border-radius: 4px;
                background: #D82D11;

            }
        }
        .groupTask{
            .van-popup--center{
                .van-popup__close-icon--top-right {
                    top: 10px;
                }
            }
            .title,.message,.joinWrap{
                padding: 10px;
            }
            .joinWay{
                display: inline-block;
                margin: 10px 10px;
                border: 1px solid #ccc;
                padding: 5px 10px;
            }

        }
    }
</style>
